<template>
  <div class="tuan">
    <h1>爆爆团</h1>
    <div class="h2">限时爆款 超级低价</div>
    <div class="btn">
      <router-link to="/index/tuan/Notice">上新预告 </router-link>
      <router-link to="/index/tuan/Snapped"> 正在抢购</router-link>
    </div>
    <RouterView />
  </div>
</template>

<script setup>
</script>

<style lang="css" scoped>
.tuan {
  height: 230px;
  background: linear-gradient(red, orange);
  padding-top: 20px;
}
.tuan h1 {
  text-align: center;
  color: white;
  font-style: italic;
  font-size: 26px;
}
.tuan .h2 {
  text-align: center;
  margin-top: 50px;
  font-size: 36px;
  font-weight: 700;
}
.tuan .btn {
  display: flex;
  margin-top: 40px;
}
.tuan .btn a {
  list-style: none;
  margin-right: 30px;
  margin-left: 20px;
  color: white;
}
.tuan .btn a.router-link-active {
  color: rgb(17, 225, 128);
}
</style>